<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link rel="stylesheet" href="style.css">
<style>
 a[class^=column]{

        background:red;

        color:#fff;

    }
    a[href$=doc]{

        background:green;

        color:#fff;

        }
    a[title*=box]{

        background:blue;

        color:#fff;

    }

</style>   

</head> 
<body>
    <a href="##" class="columnNews">我的背景想变成红色</a>
    <a href="##" class="columnVideo">我的背景想变成红色</a>
    <a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
    <a href="1.doc">我的背景想变成绿色</a>
    <a href="2.doc">我的背景想变成绿色</a><br/>
    <a href="##" title="this is a box">我的背景想变成蓝色</a>
    <a href="##" title="box1">我的背景想变成蓝色</a>
    <a href="##" title="there is two boxs">我的背景想变成蓝色</a>

   <p>Root选择器修改HTML元素的背景颜色</p>

    <div id="header">页头</div>
    <div id="page">页体</div>
    <div id="footer">页脚</div>

    <p>我这里有内容</p>
    <p> <!-- 我这里有一个空格 --></p>
    <p></p><!-- 我这里任何内容都没有 -->

    <div class="menuSection" id="brand">
        <h2><a href="#brand">Brand</a></h2>
        <p>content for Brand</p>
    </div>
    <ol>
      <li><a href="##">Link1</a></li>
      <li><a href="##">Link2</a></li>
      <li><a href="##">link3</a></li>
      <li><a href="##">link4</a></li>
      <li><a href="##">link5</a></li>
    </ol>
    <div class="wrapper">
      <p>我是第一个段落</p>
      <p>我是第二个段落</p>
      <div>我是第一个Div元素</div>
      <div>我是第二个Div元素</div>
      <p>我是第三个段落</p>
      <p>我是第四个段落</p>
      <div>我是第三个Div元素</div>
      <div>我是第四个Div元素</div>
    </div>

    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
    </ul>
    <ul>
      <li>Item1</li>
    </ul>
    <ul>
      <li>Item1</li>
    </ul>
    
    <form action="#">
 
  <div>
    <label for="enabled">可用输入框:</label>
    <input type="text" id="enabled" />
  </div>

  <div>
    <label for="disabled">禁用输入框:</label>
    <input type="text" id="disabled" disabled="disabled" />
  </div>
  
 </form> 

<form action="#">
  <div><input type="text" /></div>

  <div>
    <input type="submit" value="我要回到上一步" />
    <input type="submit" value="禁止点下一步" disabled />
  </div>
</form> 

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="radio" checked="checked"  id="boy" name="1" />
      <span></span>
    </div>
    <label for="boy">男</label>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="radio"  id="girl" name="1"  />
      <span></span>
    </div>
    <label for="girl">女</label>
  </div>
</form> 
<!-- /*没有反应 */ -->
<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，
有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。</p>

<form action="#">
  <div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
  </div>
  <div>
    <label for="comment">评论：</label>
    <textarea name="comment" id="" cols="30" rows="10" readonly="readonly"></textarea>
  </div>
</form>

<a class="box1 effect">
  <h3>Shadow Effect </h3>
</a>
</body>
</html>